import React, { Component } from 'react';
import { Form, Select, Input, Button, Modal, Icon, Col, Row } from 'antd';
import AddPeer from '../AddPeer';
import Tips from '../../../Tips/index';
const FormItem = Form.Item;
const { TextArea } = Input;
class joinNetWork extends Component {
  constructor() {
    super();
    this.state = {
      peernum: 0,
      peerarray: [],
      addvisible: false,
      message: ''
    };
  }
  removepeer= (i) => {
    var peerarray = this.state.peerarray;
    peerarray.splice(i, 1);
    this.setState({ peerarray: peerarray });
  }
  add = () => {
    if (this.state.peerarray.length >= 8) {
      this.setState({ message: 'Peer节点已达上限' }, () => {
        setTimeout(() => {
          this.setState({ message: '' });
        }, 1000);
      });
    } else {
      this.setState({ addvisible: true, });
    }
  }
  addChancel = () => {
    this.setState({ addvisible: false });
  }
  addsubmit = (qq, values) => {
    let peerarray = this.state.peerarray;
    peerarray.push({
      name: values.PeerName,
    });
    this.setState({ addvisible: false, peerarray: peerarray }, () => {
      this.props.form.validateFields(['peerNum'], { force: true });
    });
  }
  render() {
    const { visible, onCancel, onCreate, form } = this.props;
    const { getFieldDecorator } = form;
    var peerlist = this.state.peerarray.map((e, i) => {
      return (
        <Col span={8} key={i}>
          <p className="removepeer"><Icon
            className="dynamic-delete-button"
            type="minus"
            onClick={() => this.removepeer(i)}
          /> {e.name}</p>
        </Col>
      );
    });
    return (
      <Modal
        visible={visible}
        title="加入一个区块链网络："
        okText="加入"
        closable={false}
        cancelText="取消"
        onCancel={onCancel}
        onOk={onCreate.bind(this, this)}
        footer={null}
      >
        <Form>
          <FormItem
            label="邀请码"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 16 }}
          >
            {getFieldDecorator('invitation', {
              rules: [{ required: true, message: '请输入您的邀请码!' }],
            })(
              <Input placeholder="请输入您的邀请码" />
            )}
          </FormItem>
          {/* <FormItem
            label="Peer节点数量"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 16 }}
          >
            {getFieldDecorator('peerNum', {
              rules: [{ required: this.state.peerarray.length < 2, message: '请配置peer节点数， 2-8个节点', pattern: /^[1-9]$|^[1-9][0-9]$/ }],
            })(
              <div className="setPeerNum">
                <p>Peer节点数量：<span>{this.state.peerarray.length}</span></p>
                <Button type="dashed" onClick={this.add} style={{ width: '100%' }}>
                  <Icon type="plus" /> 配置Peer节点
                </Button>
                <div className="peername">
                  <Row span={15}>
                    {peerlist}
                  </Row>
                </div>
              </div>
            )}
          </FormItem> */}
          <FormItem
            label="申请说明"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 16 }}
          >
            {getFieldDecorator('remark', {
              rules: [{ required: true, message: '请输入对此网络的简要描述!' }],
            })(
              <TextArea rows={4} placeholder="请输入对此网络的简要描述" />
            )}
          </FormItem>
        </Form>
        <AddPeer
          visible={this.state.addvisible}
          onCancel={this.addChancel}
          addsubmit={this.addsubmit}
          data={this.state.peerarray}
        />
        <Tips message={this.state.message} />
        <footer className="detailfooter">
          <Button type="default" onClick={onCancel} className="startdetail cancelnetjoin" >取消</Button>
          <Button disabled className="stopdatail" >加入</Button>
        </footer>
      </Modal>
    );
  }
}

const JoinNetWork = Form.create()(joinNetWork);
export default JoinNetWork;
